<!--
 * @Author: your name
 * @Date: 2020-11-04 14:07:46
 * @LastEditTime: 2021-06-01 15:09:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ws-shop\src\views\Home.vue
-->
<template>
  <div class="home">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://img1.lukou.com/static/coupon/p/image_link/JiV6OeaUX4jPoJwOozMLBWq2JHV2NkAd.png"/>
          </div>
          <div class="swiper-slide">
            <img src="http://img1.lukou.com/static/coupon/p/image_link/oQcjarTaQoVVOcL6LUOQZHOp27svt6rn.png"/>
          </div>
          <div class="swiper-slide">
            <img src="http://img1.lukou.com/static/coupon/p/image_link/D1XxHbt5ZnbQxmKR4XGSSjdK59zenNz9.png"/>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <div class="hot">
        <span class="title">今日爆品 | 实时热卖 优先抢购</span>
        <van-list
          v-model="loading"
          :finished="isEnd"
          finished-text="没有更多了"
          @load="getHot"
        >
          <van-cell
            v-for="baokuanCommoditie in baokuanCommodities"
            :key="baokuanCommoditie.index"
          >
            <template #title>
              <router-link :to="`/details?id=${baokuanCommoditie.id}`" tag="div" class="link">
                <img :src="baokuanCommoditie.image">
                <div class="detail">
                  <p class="name">{{baokuanCommoditie.title}}</p>
                  <p class="num">近两小时售出{{baokuanCommoditie.saleNum}}件</p>
                  <p class="money">
                    券后￥<span class="new">{{baokuanCommoditie.price}}</span>
                    <span class="old">￥{{baokuanCommoditie.originPrice}}</span>
                  </p>
                  <p class="discount">
                    <span>{{baokuanCommoditie.couponValue}}</span>
                    <span>月销{{baokuanCommoditie.saleNum/1000 | toFix2}}万</span>
                  </p>
                </div>
              </router-link>
            </template>
          </van-cell>
        </van-list>
      </div>
    </van-pull-refresh>
    <div class="gotop" v-show="gotop" @click="toTop">Top</div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/swiper.scss'
import { Toast } from 'vant'

export default {
  name: 'Home',
  data () {
    return {
      id: '',
      baokuanCommodities: [],
      loading: false,
      isEnd: false,
      isLoading: false,
      gotop: false
    }
  },
  created () {
    // nextTick,当数据改变了以后要等到DOM元素根据新的数据渲染完成才能写轮播图
    this.$nextTick().then(() => {
      this.initSwiper()
    })
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    initSwiper () {
      // eslint-disable-next-line
      new Swiper('.swiper-container', {
        loop: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    },
    getHot () {
      this.$http.getShop()
        .then(resp => {
          this.baokuanCommodities = resp
          this.loading = false
          this.isEnd = true
        })
    },
    onRefresh () {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
      }, 1000)
    },
    toTop () {
      location.reload()
    },
    handleScroll (e) {
      // const scrolltop = e.target.scrollTop
      // scrolltop > 200 ? (this.gotop = true) : (this.gotop = false)
      if (e.target.scrollTop > 300) {
        this.gotop = true
      } else {
        this.gotop = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 378 / 1008 * 100%;
  .swiper-wrapper {
    position: absolute;
    left: 0;
    top: 0;
  }
  img {
    width: 100%;
  }
}
.hot {
  width: 97%;
  margin: 10px auto;
  .title {
    font-size: 20px;
    font-weight: 600;
    line-height: 40px;
    margin-left: 8px;
    font-family: quote($string: "华文行楷");
    color: #fd6c28;
  }
  border-radius: 5px;
  background-color: rgb(188, 218, 253);
  .van-cell {
    background-color: white;
    box-sizing: border-box;
    padding: 5px;
    .van-cell__title {
     .link {
        display: flex;
        justify-content: left;
        img {
          width: 130px;
          height: 130px;
        }
        .detail {
          flex: 1;
          margin-left: 10px;
          .name {
            width: 210px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            line-height: 30px;
          }
          .num {
            float: left;
            color: white;
            font-size: 14px;
            line-height: 25px;
            padding: 0 10px 0 10px;
            margin-top: 10px;
            border-radius: 5px;
            background: linear-gradient(92deg
    ,#ff5201,#fa8c16);
          }
          .money {
            margin-top: 40px;
            font-size: 14px;
            color: #ff5201;
            .new {
              font-size: 24px;
              font-weight: 600;
            }
            .old {
              color: #999;
              text-decoration: line-through;
              margin-left: 10px;
            }
          }
          .discount {
            font-size: 14px;
            line-height: 40px;
            :nth-child(1) {
              color: #ff5201;
              padding: 2px;
              border: 1px solid #ff5201;
              border-radius: 3px;
            }
            :nth-child(2) {
              padding-right: 5px;
              color: #666;
              font-size:12px;
              float: right;
            }
          }
        }
     }
    }
  }
}
.gotop {
  text-align: center;
  position: fixed;
  right: 15px;
  bottom: 60px;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  background: lightskyblue;
  color: white;
}
</style>
